<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="/static/component/pear/css/pear.css" rel="stylesheet" />
    <script src="/static/component/layui/layui.js"></script>
    <script src="/static/component/pear/pear.js"></script>
</head>

<body>

    <body class="pear-container">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">关键字</label>
                            <div class="layui-input-inline">
                                <input type="text" name="keywords" placeholder="" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="query">
                                <i class="layui-icon layui-icon-search"></i>
                                查询
                            </button>
                            <button type="reset" class="pear-btn pear-btn-md">
                                <i class="layui-icon layui-icon-refresh"></i>
                                重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="dataTable" lay-filter="dataTable"></table>
            </div>
        </div>
        <script type="text/html" id="options">
            <button class="pear-btn pear-btn-sm" lay-event="opt"><i class="layui-icon layui-icon-add-1"></i></button>
        </script>
        <script src="/static/component/layui/layui.js"></script>
        <script src="/static/component/pear/pear.js"></script>
        <script>
            layui.use(['table', 'form', 'jquery'], function () {
                let table = layui.table;
                let form = layui.form;
                let $ = layui.jquery;

                let MODULE_PATH = "/{:request()->app}/index/";
                let opt = '';
                window.child = function (obj) { opt = obj }
                let cols = [
                    [{
                        title: '选中',
                        toolbar: '#options'
                    }, {
                        field: 'href',
                        title: '文件',
                        unresize: true,
                        align: 'center',
                        templet: function (d) {
                            if (d.mime.indexOf("image/") !== -1) {
                                return '<img class="photo" lay-event="photo" src="' + d.href + '"></i>';
                            } else {
                                return '<a href="' + d.href + '" target="_blank" style="color: #FF5722;">预览</a>';
                            }
                        }
                    }, {
                        field: 'name',
                        title: '文件名称',
                        unresize: true,
                        align: 'center'
                    }, {
                        field: 'size',
                        title: '大小',
                        unresize: true,
                        align: 'center'
                    }, {
                        field: 'create_time',
                        title: '创建时间',
                        unresize: true,
                        align: 'center'
                    }
                    ]
                ]

                table.render({
                    elem: '#dataTable',
                    url: MODULE_PATH + 'optFile',
                    where: { mime: "{$mime}" },
                    page: true,
                    limit: 10,
                    parseData: function (params) {
                        return {
                            "code": params.code,
                            "msg": params.msg,
                            "count": params.data.total,
                            "data": params.data.data
                        };
                    },
                    request: {
                        pageName: 'page',
                        limitName: 'limit'
                    },
                    response: {
                        statusCode: 200
                    },
                    cols: cols,
                    cellMinWidth: 70,
                    skin: 'line'
                });

                form.on('submit(query)', function (data) {
                    table.reload('dataTable', {
                        where: data.field,
                        page: { curr: 1 }
                    })
                    return false;
                });

                table.on('tool(dataTable)', function (obj) {
                    if (obj.event === 'photo') {
                        window.photo(obj);
                    } else if (obj.event === 'opt') {
                        $("#" + opt + "-name", window.parent.document).attr('value', obj.data.name);
                        $("#" + opt + "-url", window.parent.document).attr('value', obj.data.href);
                        $("#" + opt + "-ext", window.parent.document).attr('value', obj.data.ext);
                        $("#" + opt + "-size", window.parent.document).attr('value', obj.data.size);
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    }
                });

                window.refresh = function () {
                    table.reload('dataTable');
                }

                // 查看大图
                window.photo = function (obj) {
                    if (!obj.data.href || obj.data.href == "") {
                        layer.msg("图片地址错误！");
                        return;
                    }
                    var auto_img = {};
                    var img = new Image();
                    img.src = obj.data.href;
                    img.onload = function () {
                        var max_height = $(window).height() - 100;
                        var max_width = $(window).width() - 22;
                        var rate1 = max_height / img.height;
                        var rate2 = max_width / img.width;
                        var rate3 = 1;
                        var rate = Math.min(rate1, rate2, rate3);
                        auto_img.height = img.height * rate;
                        auto_img.width = img.width * rate;
                        layer.open({
                            type: 1,
                            title: false,
                            area: ['auto'],
                            skin: 'layui-layer-nobg', //没有背景色
                            shadeClose: true,
                            content: "<img src='" + obj.data['href'] + "' width='" + auto_img.width + "px' height='" + auto_img.height + "px'>"
                        })
                    }
                };
            })
        </script>
    </body>

</html>